<template>
  <div style="display: flex; flex-direction: column; height: 100%; gap: 10px">
    <div style="flex: 1; display: flex; gap: 10px">
      <content-area title="路径规划场景" style="flex: 1">
        <clickable-list
          :list-items="data.map((item:any) => item.name)"
          @item-clicked="changeDataPhotoIndex"
        ></clickable-list>
      </content-area>
      <content-area title="场景预览">
        <el-image
          :src="data[dataPhotoIndex].photo"
          :preview-src-list="[data[dataPhotoIndex].photo]"
          style="height: 330px; width: 480px"
        />
      </content-area>
      <content-area title="路径规划过程" style="flex: 1">
        <clickable-list
          :list-items="data.map((item:any) => item.name)"
          @item-clicked="changeDataVideoIndex"
        ></clickable-list>
      </content-area>
      <content-area title="规划过程展示">
        <video controls :src="data[dataVideoIndex].video" width="600"></video>
      </content-area>
    </div>
    <div style="flex: 1; display: flex; gap: 10px">
      <content-area title="规划结果数据" style="flex: 1">
        <selectable-list
          :list-items="results.map((item:any) => item.name)"
          @item-change="selectedResultsChange"
        ></selectable-list>
      </content-area>
      <content-area title="3d路径">
        <traj-graph
          :chart-data="[
            [
              [1, 1, 1],
              [2, 2, 2],
              [3, 3, 3],
            ],
          ]"
          style="width: 400px; height: 350px"
        ></traj-graph>
      </content-area>
      <content-area title="3轴坐标">
        <axis-graph
          :chart-data="[
            [
              [1, 1, 1],
              [2, 2, 2],
              [3, 3, 3],
            ],
          ]"
          style="width: 400px; height: 350px"
        ></axis-graph>
      </content-area>
      <content-area title="评价指标"> </content-area>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

onMounted(() => {
  fetchData();
  fetchResults();
});

const data = ref([{ name: "", video: "", photo: "" }]);
const dataPhotoIndex = ref(0);
const changeDataPhotoIndex = (index: number) => {
  dataPhotoIndex.value = index;
};
const dataVideoIndex = ref(0);
const changeDataVideoIndex = (index: number) => {
  dataVideoIndex.value = index;
};
const fetchData = async () => {
  try {
    const res = await fetch("http://localhost:5000/traj/data");
    data.value = await res.json();
  } catch (error) {
    console.error("请求出错：", error);
  }
};

const results = ref([
  {
    name: "",
    x: [],
    y: [],
    z: [],
    len: 0,
    duration: 0,
    meanCurvature: 0,
    varianceCurvature: 0,
  },
]);
const selectedResults = ref([0]);
const selectedResultsChange = (nums: number[]) => {
  selectedResults.value = nums;
};
const fetchResults = async () => {
  try {
    const res = await fetch("http://localhost:5000/traj/results");
    const names = await res.json();
    results.value = await Promise.all(
      names.map((item: { name: string }) =>
        fetch("http://localhost:5000/traj/results/" + item.name).then((r) => r.json())
      )
    );
  } catch (error) {
    console.error("请求出错：", error);
  }
};
</script>

<style scoped></style>
